<template>
  <div class="app-container">

    <div>
      API请求
    </div>
    <div id="main"></div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="eventType" label="请求状态" />
      <el-table-column prop="pathName" label="请求地址" width="180" />
      <el-table-column prop="method" label="请求方法" />
      <el-table-column prop="status" label="返回状态" />
      <el-table-column prop="response" label="返回数据" width="180" />
      <el-table-column prop="duration" label="持续时间" />
      <el-table-column prop="timestamp" label="请求时间" />
      <el-table-column prop="url" label="发送网址" />
      <el-table-column prop="userAgent" label="接收端" />
    </el-table>

  </div>
</template>

<script>
import { getList } from '@/api/table'

import * as echarts from 'echarts';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,

      xhr: {},
      tableData: [],
      dialogTableVisible: false,
    }
  },
  created() {
    this.fetchData()
    this.apiarrcge()

  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then((response) => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleClick(row) {
      console.log(row)
    },
    apiarrcge() {
      this.$api.Logs.getXhr(1).then((res) => {
        res.data.data.forEach(e => {
          this.tableData.push({
            id: e._id,
            eventType: e.eventType,
            pathName: e.pathName,
            method: e.method,
            status: e.status,
            response: e.response,
            duration: e.duration,
            timestamp: e.timestamp.replace('T', ' ').slice(0, 19),
            url: e.url,
            userAgent: e.userAgent
          });
        })
      this.drawChart();
      })  
    },
    drawChart(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      var date = new Date();
      var NowDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      function changeDate(NowDate, index) {
        let arr = NowDate.split('-');
        if (arr[2] > index) {
          let result = arr[2] - index
          return arr[0] + '-' + arr[1] + '-' + result
        } else if (arr[2] <= index) {
          arr[2] = index - arr[2] + 30;
          arr[1]--;
          return arr[0] + '-' + arr[1] + '-' + arr[2]
        }
      }


      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: 'rgba(180, 0, 0, 0.4)'
            },
            {
              gt: 5,
              lt: 7,
              olor: 'rgba(180, 0, 0, 0.4)'
            }
          ]
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: '#FF3030',
              width: 5
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              [changeDate(NowDate, 8), 1],
              [changeDate(NowDate, 7), 4],
              [changeDate(NowDate, 6), 8],
              [changeDate(NowDate, 5), 5],
              [changeDate(NowDate, 4), 2],
              [changeDate(NowDate, 3), 3],
              [changeDate(NowDate, 2), 5],
              [changeDate(NowDate, 1), 3],
              [NowDate, this.errorNumber]
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
   async mounted() {
     await this.apiarrcge();
    },
  }
}
</script>


<style>
#main {
  height: 400px;
}

.top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 30px;
  font-size: 12px;
  color: rgba(150, 161, 169, 0.976);
}

.Details {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 10px;
  font-size: 25px;
  font-weight: 600;
  color: rgba(26, 29, 30, 0.976);
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>